<div class="survey-page">
    <div onclick="surveyBuilder();" id="survey-builder-button">
        <i class="fa fa-angle-double-right"></i>
    </div>
    <div class="survey-page-builder"></div>

    <!--survey content -->
    <div class="survey-page-content" scid="<?php echo $scid; ?>">
        <div style="padding: 3%">
            <div class="form-control">
                <div class="form-group">
                    <input id="survey_title" class="input" type="text" placeholder="Tiêu đề khảo sát" value="<?php echo $survey_child_title; ?>">
                </div>
            </div>
            <div class="form-control">
                <div class="form-group">
                    <select id="survey_folder" class="select">
                        <?php
                            foreach($folder as $value){
                                if($sid == $value['sid']){
                                    echo '<option selected value="'.$value['sid'].'">'.$value['survey_name'].'</option>';
                                }else{
                                    echo '<option value="'.$value['sid'].'">'.$value['survey_name'].'</option>';
                                }
                            }
                        ?>
                    </select>
                </div>
            </div>

            <!--<pre>
                <?php
/*                    var_dump($question);
                */?>
            </pre>-->
            <div class="widget-container-span">
            <?php
                for($i = 0; $i< sizeof($question); $i++){
                    $question_type = $question[$i]['question_type'];
                    switch($question_type){
                        case "1":{
                            ?>
                            <div qid="<?php echo $question[$i]['qid']; ?>"  builder="1" class="widget-box col-single-choice">

                                <!-- Câu hỏi hiện thị -->
                                <div class="widget-question">
                                    <div class="widget-header">
                                        <h5>
                                            <span class="col-number"><?php echo $question[$i]['question_position']+1; ?></span>.
                                            <span class="col-title"><?php echo $question[$i]['question_name']; ?></span>
                                        </h5>
                                    </div>
                                    <div class="widget-body">
                                        <div class="widget-main">
                                            <ul>
                                                <?php
                                                    foreach($question[$i]['children'] as $value){
                                                        echo '<li>'.$value['question_name'].'</li>';
                                                    }
                                                ?>
                                            </ul>
                                        </div>
                                    </div>
                                </div>

                                <!-- Chỉnh sửa câu hỏi-->
                                <div class="widget-edit" hidden="hidden">
                                    <div class="widget-edit-method">Q<span class="col-number"><?php echo $question[$i]['question_position']+1; ?></span>: Single Choice</div>

                                    <div class="widget-edit-question form-group">
                                        <textarea class="textarea col-title" placeholder="Question name"><?php echo $question[$i]['question_name']; ?></textarea>

                                        <div class="tag" qid="<?php echo $question[$i]['qid']; ?>">
                                            <span class="question-tag"><i class="fa fa-tag"></i></span>
                                            <div class="survey-tag">
                                                <div class="tagged">
                                                    <?php
                                                        //if(isset($question[$i]['tag'])){
                                                            foreach($question[$i]['tag'] as $value){
                                                                ?>
                                                                    <div class="tagged-item" tid='<?php echo $value['id']; ?>'>
                                                                        <span><?php echo $value['title']; ?><</span>
                                                                        <span><i class="fa fa-times"></i></span>
                                                                    </div>
                                                                <?php
                                                            }
                                                        //}
                                                    ?>
                                                </div>
                                                <div class="tag-input">
                                                    <input type="text" placeholder="Tag">
                                                </div>
                                                <div class="search-result">
                                                    <ul>
                                                        <?php
                                                            foreach($tag as $value){
                                                                echo '<li tid="'.$value['atid'].'">'.$value['attr_name'].'</li>';
                                                            }
                                                        ?>
                                                    </ul>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="widget-edit-answer">
                                        <div class="widget-edit-answer-title">Answers</div>
                                        <ul class="widget-edit-answer-body form-control">
                                            <?php
                                                foreach($question[$i]['children'] as $value){
                                                    ?>
                                                        <li class="form-group">
                                                            <div class="col-answer">
                                                                <div class="col-left">
                                                                    <input class="input" type="text" placeholder="Answer" value="<?php echo $value['question_name']; ?>">

                                                                    <div class="tag" qid="<?php echo $question[$i]['qid']; ?>">
                                                                        <span class="question-tag"><i class="fa fa-tag"></i></span>
                                                                        <div class="survey-tag">
                                                                            <div class="tagged">
                                                                            </div>
                                                                            <div class="tag-input">
                                                                                <input type="text" placeholder="Tag">
                                                                            </div>
                                                                            <div class="search-result">
                                                                                <ul>
                                                                                    <?php
                                                                                    foreach($tag as $v){
                                                                                        echo '<li tid="'.$v['atid'].'">'.$v['attr_name'].'</li>';
                                                                                    }
                                                                                    ?>
                                                                                </ul>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                                <div class="col-right">
                                                                    <span class="widget-edit-add-question"><i class="fa fa-plus-circle"></i></span>
                                                                    <span class="widget-edit-remove-question"><i class="fa fa-times-circle"></i></span>
                                                                </div>
                                                            </div>
                                                        </li>
                                                    <?php
                                                }
                                            ?>
                                        </ul>
                                    </div>
                                    <!-- Lưu hoặc hủy lưu chỉnh sửa -->
                                    <div class="widget-edit-option">
                                        <input class="btn save-question" type="button" value="Ok">
                                        <input class="btn cancel-question" type="button" value="Cancel">
                                    </div>
                                </div>

                                <!-- Xóa hoặc edit câu hỏi.-->
                                <div class="widget-option">
                                    <span onclick="editQuestion(this);" class="edit-survey-question"><i class="fa fa-pencil-square-o"></i></span>
                                    <span onclick="removeQuestion(this);" class="remove-survey-question"><i class="fa fa-times"></i></span>
                                </div>
                            </div>
                            <?php
                            break;
                        }
                        case "2":{
                            ?>
                            <!-- Câu hỏi -->
                            <div qid="<?php echo $question[$i]['qid']; ?>" builder="2" class="widget-box col-multiple-choice">

                                <!-- Câu hỏi hiện thị -->
                                <div class="widget-question">
                                    <div class="widget-header">
                                        <h5><span class="col-number"><?php echo $question[$i]['question_position']+1; ?></span>. <span class="col-title"><?php echo $question[$i]['question_name']; ?></span></h5>
                                    </div>

                                    <div class="widget-body">
                                        <div class="widget-main">
                                            <ul class="multiple-choice">
                                                <?php
                                                    foreach($question[$i]['children'] as $value){
                                                        ?>
                                                            <li>
                                                                <input id="Q<?php echo $value['qid'] ?>" type="checkbox">
                                                                <label for="Q<?php echo $value['qid'] ?>"><?php echo $value['question_name']; ?></label>
                                                            </li>
                                                        <?php
                                                    }
                                                ?>
                                            </ul>
                                        </div>
                                    </div>
                                </div>

                                <!-- Chỉnh sửa câu hỏi-->
                                <div class="widget-edit" hidden="hidden">
                                    <div class="widget-edit-method">Q<span class="col-number"><?php echo $question[$i]['question_position']+1; ?></span>: Multiple Choice</div>

                                    <div class="widget-edit-question form-group">
                                        <textarea class="textarea col-title" placeholder="Question name"><?php echo $question[$i]['question_name']; ?></textarea>

                                        <div class="tag" qid="<?php echo $question[$i]['qid']; ?>">
                                            <span class="question-tag"><i class="fa fa-tag"></i></span>
                                            <div class="survey-tag">
                                                <div class="tagged">
                                                </div>
                                                <div class="tag-input">
                                                    <input type="text" placeholder="Tag">
                                                </div>
                                                <div class="search-result">
                                                    <ul>
                                                        <?php
                                                            foreach($tag as $value){
                                                                echo '<li tid="'.$value['atid'].'">'.$value['attr_name'].'</li>';
                                                            }
                                                        ?>
                                                    </ul>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="widget-edit-answer">
                                        <div class="widget-edit-answer-title">Answers</div>
                                        <ul class="widget-edit-answer-body form-control">
                                            <?php
                                                foreach($question[$i]['children'] as $value){
                                                    ?>
                                                    <li class="form-group">
                                                        <div class="col-answer">
                                                            <div class="col-left">
                                                                <input class="input" type="text" placeholder="Answer" value="<?php echo $value['question_name']; ?>">

                                                                <div class="tag" qid="<?php echo $question[$i]['qid']; ?>">
                                                                    <span class="question-tag"><i class="fa fa-tag"></i></span>
                                                                    <div class="survey-tag">
                                                                        <div class="tagged">
                                                                        </div>
                                                                        <div class="tag-input">
                                                                            <input type="text" placeholder="Tag">
                                                                        </div>
                                                                        <div class="search-result">
                                                                            <ul>
                                                                                <?php
                                                                                    foreach($tag as $v){
                                                                                        echo '<li tid="'.$v['atid'].'">'.$v['attr_name'].'</li>';
                                                                                    }
                                                                                ?>
                                                                            </ul>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <div class="col-right">
                                                                <span class="widget-edit-add-question"><i class="fa fa-plus-circle"></i></span>
                                                                <span class="widget-edit-remove-question"><i class="fa fa-times-circle"></i></span>
                                                            </div>
                                                        </div>
                                                    </li>

                                                <?php
                                                }
                                            ?>
                                        </ul>
                                    </div>

                                    <!-- Lưu hoặc hủy lưu chỉnh sửa -->
                                    <div class="widget-edit-option">
                                        <input class="btn save-question" type="button" value="Ok">
                                        <input class="btn cancel-question" type="button" value="Cancel">
                                    </div>
                                </div>

                                <!-- Xóa hoặc edit câu hỏi.-->
                                <div class="widget-option">
                                    <span onclick="editQuestion(this);" class="edit-survey-question"><i class="fa fa-pencil-square-o"></i></span>
                                    <span onclick="removeQuestion(this);" class="remove-survey-question"><i class="fa fa-times"></i></span>
                                </div>
                            </div>
                            <?php
                            break;
                        }
                        case "3":{
                            ?>
                            <!-- Câu hỏi -->
                            <div qid="<?php echo $question[$i]['qid']; ?>" builder="3" class="widget-box col-table">
                                <!-- Câu hỏi hiện thị -->
                                <div class="widget-question">
                                    <div class="widget-header">
                                        <h5><span class="col-number"><?php echo $question[$i]['question_position']+1; ?></span>. <span class="col-title"><?php echo $question[$i]['question_name']; ?></span></h5>
                                    </div>

                                    <div class="widget-body" >
                                        <div class="widget-main">
                                            <table class="table table-bordered answer-table">
                                                <thead>
                                                    <tr>
                                                        <th></th>
                                                        <?php
                                                            foreach($question[$i]['column'] as $value){
                                                                echo '<th >'.$value['question_child_name'].'</th>';
                                                            }
                                                        ?>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    <?php
                                                        foreach($question[$i]['row'] as $value){
                                                            ?>
                                                            <tr>
                                                                <td><?php echo $value['question_name']; ?></td>
                                                                <?php
                                                                    foreach($question[$i]['column'] as $v){
                                                                        ?>
                                                                            <td>
                                                                                <input name="Q<?php echo ($question[$i]['question_position']+1)."-".$v['qcid']; ?>" type="radio">
                                                                            </td>
                                                                        <?php
                                                                    }
                                                                ?>
                                                            </tr>
                                                            <?php
                                                        }
                                                    ?>
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                </div>

                                <!-- Chỉnh sửa câu hỏi-->
                                <div class="widget-edit table-edit" hidden="hidden">
                                    <div class="widget-edit-method">Q<span class="col-number"><?php echo $question[$i]['question_position']+1; ?></span>: Table</div>

                                    <div class="widget-edit-question form-group">
                                        <textarea class="textarea col-title" placeholder="Question name"><?php echo $question[$i]['question_name']; ?></textarea>

                                        <div class="tag" qid="<?php echo $question[$i]['qid']; ?>">
                                            <span class="question-tag"><i class="fa fa-tag"></i></span>
                                            <div class="survey-tag">
                                                <div class="tagged">

                                                </div>
                                                <div class="tag-input">
                                                    <input type="text" placeholder="Tag">
                                                </div>
                                                <div class="search-result">
                                                    <ul>
                                                        <?php
                                                        foreach($tag as $value){
                                                            echo '<li tid="'.$value['atid'].'">'.$value['attr_name'].'</li>';
                                                        }
                                                        ?>
                                                    </ul>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <!-- Hàng-->
                                    <div class="widget-edit-answer col-edit-row">
                                        <div class="widget-edit-answer-title">Row Choices</div>
                                        <div class="col-table-answer">
                                            <div class="col-table-answer-left">
                                                <ul class="widget-edit-answer-body form-control">
                                                    <?php
                                                        foreach($question[$i]['row'] as $value){
                                                            ?>
                                                                <li class="form-group">
                                                                    <div class="col-answer">
                                                                        <div class="col-left">
                                                                            <input class="input" type="text" placeholder="Answer" value="<?php echo $value['question_name']; ?>">
                                                                        </div>
                                                                        <div class="col-right">
                                                                            <span class="widget-edit-add-question"><i class="fa fa-plus-circle"></i></span>
                                                                            <span class="widget-edit-remove-question"><i class="fa fa-times-circle"></i></span>
                                                                        </div>
                                                                    </div>
                                                                </li>
                                                            <?php
                                                        }
                                                    ?>
                                                </ul>
                                            </div>
                                            <div class="col-table-answer-right">
                                                <!-- Hình vẽ rows-->
                                                <div class="widget-edit-table-rows-img">
                                                    <p>Rows</p>
                                                    <div class="table-rows-img"></div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <!-- Cột -->
                                    <div class="widget-edit-answer col-edit-column">
                                        <div class="widget-edit-answer-title">Column Choices</div>
                                        <div class="col-table-answer">
                                            <div class="col-table-answer-left">
                                                <ul class="widget-edit-answer-body form-control">
                                                    <?php
                                                        foreach($question[$i]['column'] as $value){
                                                            ?>
                                                                <li class="form-group">
                                                                    <div class="col-answer">
                                                                        <div class="col-left">
                                                                            <input class="input" type="text" placeholder="Answer" value="<?php echo $value['question_child_name']; ?>">
                                                                        </div>
                                                                        <div class="col-right">
                                                                            <span class="widget-edit-add-question"><i class="fa fa-plus-circle"></i></span>
                                                                            <span class="widget-edit-remove-question"><i class="fa fa-times-circle"></i></span>
                                                                        </div>
                                                                    </div>
                                                                </li>
                                                            <?php
                                                        }
                                                    ?>
                                                </ul>
                                            </div>
                                            <div class="col-table-answer-right">
                                                <!-- Hình vẽ columns -->
                                                <div class="widget-edit-table-column-img">
                                                    <p>Columns</p>
                                                    <div class="table-column-img"></div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <!-- Lưu hoặc hủy lưu chỉnh sửa -->
                                    <div class="widget-edit-option">
                                        <input class="btn save-question" type="button" value="Ok">
                                        <input class="btn cancel-question" type="button" value="Cancel">
                                    </div>
                                </div>

                                <!-- Xóa hoặc edit câu hỏi.-->
                                <div class="widget-option">
                                    <span onclick="editQuestion(this);" class="edit-survey-question"><i class="fa fa-pencil-square-o"></i></span>
                                    <span onclick="removeQuestion(this);" class="remove-survey-question"><i class="fa fa-times"></i></span>
                                </div>
                            </div>

                            <?php
                            break;
                        }
                        default:{
                            break;
                        }
                    }
                }
            ?>
            </div>
            <!--Save or cancel -->
            <div class="survey-submit">
                <input class="save-survey btn" type="button" onclick="updateSurvey(this);" value="Update">
            </div>

        </div>
    </div>
</div>
